<template>
  <div class="content">
    <div class="commonality">
      <div class="app-top">
        <div class="app-top_back" @click="back">
          <img src="./icons/head-back.png" alt="#" />
        </div>
        <div class="app-top_title">今日必拼</div>
        <div class="app-top_options" @click="RefreshShow">
          <img src="./icons/more.png" alt="#" />
        </div>
        <div class="refreshRoBack" v-if="refreshRoBackIsShow">
          <div @click="back">首页</div>
          <div @click="refresh">刷新</div>
          <span class="corner"></span>
        </div>
      </div>
      <div class="app-options">
        <div v-for="(val, key) in todayRoTomorrow"
             :key="key"
             @click="todayRoTomorrowShow(key)">{{val}}</div>
        <div class="indicate" :class="{'indicateTomorrow' : index === 1}"></div>
      </div>
      <div class="app-time">
        <div class="app-time_box">
          {{ todayRoTomorrowText.word_2}}
          <div class="time">
            <span class="text">{{ todayRoTomorrowText.word_1}}</span>
            <div class="hours">{{ down.h }}</div>
            :
            <div class="points">{{ down.m }}</div>
            :
            <div class="second">{{ down.s }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="app-today" v-if="isTodayRoTomorrow">
      <div class="app-hotDetails">
        <div
          v-for="(val, key) in hotDetails"
          :key="key"
          class="app-hotDetails_box">
          <div class="img">
            <img :src="val.image" alt="#" />
          </div>
          <div class="hotDetails_data">
            <p class="title">{{ val.word }}</p>
            <div class="advantages">
              <span v-text="val.word_1"></span>
              <span>丨</span>
              <span v-text="val.word_2"></span>
              <span>丨</span>
              <span v-text="val.word_3"></span>
            </div>
            <div class="preferential">
              满十用一
            </div>
            <div v-text="`已拼` + val.number + `万件`" class="haveBuy"></div>
            <div class="money">
              <span>￥</span>
              <span v-text="val.money" class="prices"></span>
              <span class="buyNow">马上抢</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="app-tomorrow" v-else>
      <div class="app-hotDetails">
        <div
          v-for="(val, key) in hotDetails"
          :key="key"
          class="app-hotDetails_box"
        >
          <div class="img">
            <img :src="val.image" alt="#" />
          </div>
          <div class="hotDetails_data">
            <p class="title">{{ val.word }}</p>
            <div class="advantages">
              <span v-text="val.word_1"></span>
              <span>丨</span>
              <span v-text="val.word_2"></span>
              <span>丨</span>
              <span v-text="val.word_3"></span>
            </div>
            <div class="preferential">
              满十用一
            </div>
            <div v-text="`已拼` + val.number + `万件`" class="haveBuy"></div>
            <div class="money">
              <span>￥</span>
              <span v-text="val.money" class="prices"></span>
              <span class="todayBuyNow">明日抢</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'today',
  data() {
    return {
      hotDetails: [],
      time: {
        dateTime: null,
        endTime: null,
        leftTime: null,
      },
      down: {
        h: null,
        m: null,
        s: null,
      },
      todayRoTomorrow: ['火爆拼团中', '明日预告'],
      isTodayRoTomorrow: true,
      todayRoTomorrowText: {
        word_1: '距结束',
        word_2: '好货有限 赶紧下单哟',
      },
      index: 0,
      refreshRoBackIsShow: false,
    };
  },
  created() {
    // eslint-disable-next-line no-underscore-dangle
    this.$http._commodity()
      .then((res) => {
        this.hotDetails = res.data.num;
      });
    this.time.endTime = new Date(2019, 6, 10, 20, 0, 0).getTime();// 设置一个倒计时的的终止时间
  },
  methods: {
    back() {
      this.$router.push({ path: '/index/hot' });
    },
    todayRoTomorrowShow(key) {
      this.index = key;
    },
    RefreshShow() {
      this.refreshRoBackIsShow = !this.refreshRoBackIsShow;
    },
    refresh() {
      this.$message1({
        messageIsShow: true,
        type: 'info',
        msg: '已刷新',
        delay: 2000,
      });
      this.refreshRoBackIsShow = false;
    },
  },
  mounted() {
    setInterval(() => {
      this.time.dateTime = new Date().getTime();
      this.time.leftTime = this.time.endTime - this.time.dateTime;
      if (this.time.leftTime >= 0) {
        // eslint-disable-next-line no-mixed-operators
        this.down.h = Math.floor(this.time.leftTime / 1000 / 60 / 60 % 24);
        // eslint-disable-next-line no-mixed-operators
        this.down.m = Math.floor(this.time.leftTime / 1000 / 60 % 60);
        // eslint-disable-next-line no-mixed-operators
        this.down.s = Math.floor(this.time.leftTime / 1000 % 60);
      }
    }, 1000);
  },
  updated() {
    if (this.index === 0) {
      this.todayRoTomorrowText.word_1 = '距结束';
      this.todayRoTomorrowText.word_2 = '好货有限 赶紧下单哟';
      this.isTodayRoTomorrow = true;
    } else {
      this.todayRoTomorrowText.word_1 = '距开始';
      this.todayRoTomorrowText.word_2 = '好拼团提前看';
      this.isTodayRoTomorrow = false;
    }
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f2f2f2;
  .commonality {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 50.77419vw;
    background: url("./icons/194.png") no-repeat top,
      url("./icons/banner.png") no-repeat 0 15.16129vw;
    background-size: 100vw;
    .app-top {
      width: 100vw;
      line-height: 147px;
      font-size: 0;
      div {
        display: inline-block;
        width: 20%;
        vertical-align: middle;
        text-align: center;
        line-height: 147px;
        img {
          position: relative;
          top: 3.45161vw;
          width: 100px;
          display: inline;
        }
      }
      .app-top_title {
        width: 60%;
        font-size: 70px;
        font-weight: bolder;
        color: white;
      }
      .refreshRoBack{
        height: 282px;
        width: 533px;
        border-radius: 30px;
        background: #fdf4f2;
        position: absolute;
        top: 12.06452vw;
        right: 10px;
        z-index: 999;
        color: #666666;
        font-size: 38px;
        .corner{
          width: 4.6129vw;
          height: 4.6129vw;
          transform: rotate(45deg);
          background: white;
          z-index: 99;
          position: absolute;
          top: -2vw;
          right: 6.41935vw;
        }
        div{
          text-indent: -5.58065vw;
          background: #fefefe;
          width: 100%;
          height: 50%;
          border-radius: 30px;
          display: block;
        }
        div:nth-child(1){
          background-image: url("./icons/1.png");
          background-position: 2.80645vw 1.64516vw;
          background-repeat: no-repeat;
          background-size: 7.87097vw;
        }
        div:nth-child(2){
          background-image: url("./icons/2.png");
          background-position: 2.80645vw 1.64516vw;
          background-repeat: no-repeat;
          background-size: 7.87097vw;
        }
      }
    }
    .app-options {
      width: 100vw;
      line-height: 5.15vw;
      font-size: 0;
      div {
        display: inline-block;
        width: 50%;
        text-align: center;
        font-size: 55px;
        color: white;
      }
      .indicate {
        width: 150px;
        height: 15px;
        border-radius: 5px;
        background: white;
        z-index: 9999;
        position: relative;
        left: 18.77419vw;
        transition: all .3s ease-in;
      }
      .indicateTomorrow {
        width: 150px;
        height: 15px;
        border-radius: 5px;
        background: white;
        z-index: 9999;
        position: relative;
        left: 68.77419vw;
        transition: all .3s ease-in;
      }
    }
    .app-time {
      width: 100vw;
      line-height: 250px;
      margin-top: 20px;
      .app-time_box {
        font-size: 40px;
        background: white;
        background-image: url("./icons/flash.png");
        background-repeat: no-repeat;
        background-position: 1.80645vw 7.41935vw;
        background-size: 63px;
        text-indent: 100px;
        width: 1162px;
        border-radius: 30px;
        margin: 10px auto 0;
        .time{
          text-indent: 0;
          margin: 0;
          display: inline-block;
          width: 431px;
          line-height: 20.16129vw;
          float: right;
          overflow: hidden;
          span {
            width: 60px;
            border-radius: 10px;
          }
          .text {
            display: inline-block;
            color: #808080;
            width: 10.59677vw;
            line-height: 117px;
          }
          .hours, .points, .second {
            display: inline-block;
            text-indent: 0;
            text-align: center;
            line-height: 60px;
            width: 60px;
            color: white;
            border-radius: 10px;
            margin: 0 5px;
          }
          .hours {
            background: #808080;
          }
          .points {
            background: #808080;
          }
          .second {
            background: #eb4f3f;
          }
        }
      }
    }
  }
  .app-hotDetails {
    margin-top: 51.06452vw;
    .app-hotDetails_box {
      width: 1165px;
      height: 538px;
      border-radius: 35px;
      background: white;
      font-size: 0;
      margin: 0 auto 30px;
      .img,
      .hotDetails_data {
        display: inline-block;
        font-size: 35px;
        vertical-align: middle;
      }
      .img {
        margin: 35px;
        width: 446px;
        height: 446px;
        img {
          border-radius: 15px;
          width: inherit;
          height: inherit;
          object-fit: cover;
        }
      }
      .hotDetails_data {
        width: 615px;
        height: 464px;
        .title {
          font-size: 45px;
          font-weight: bold;
        }
        .advantages {
          line-height: 109px;
          span {
            color: #999999;
            font-size: 35px;
          }
        }
        .preferential {
          display: block;
          width: 170px;
          line-height: 60px;
          border-radius: 20px;
          background: #fbede4;
          font-size: 30px;
          text-align: center;
          color: #e06431;
        }
        .haveBuy {
          line-height: 107px;
          color: #969696;
        }
        .money {
          span {
            color: #e76a58;
            font-size: 32px;
          }
          .prices {
            font-size: 50px;
          }
          .buyNow {
            display: inline-block;
            width: 221px;
            line-height: 71px;
            background: #eb5642;
            font-size: 37px;
            color: white;
            text-align: center;
            border-radius: 30px;
            float: right;
          }
          .todayBuyNow {
            display: inline-block;
            width: 221px;
            line-height: 71px;
            border: 1px solid #999999;
            font-size: 37px;
            color: #666666;
            text-align: center;
            border-radius: 30px;
            float: right;
           }
        }
      }
    }
  }
}
</style>
